<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">添加银行卡</block>
		</cu-custom>
		<view class="add-content">
			<view class='enroll-item'>
				<view class='item-title'>持卡人姓名</view>
				<view class='item-xing'>*</view>
				<input class='item-content' type='text' placeholder-style="color: #999" placeholder='请输入姓名' v-model='name'></input>
			</view>
			<!-- <view class='enroll-item' style="margin-top: 2rpx;padding-right:20rpx;">
				<view class='item-title'>手机号</view>
				<view class='item-xing'>*</view>
				<input class='item-content' type='number' placeholder='请输入手机号' v-model='phone'></input>
				<view class="get-code" :data-count="count" @click="setVerify">{{VerifyCode}}</view>
			</view>
			<view class='enroll-item' style="margin-top: 2rpx;">
				<view class='item-title'>验证码</view>
				<view class='item-xing'>*</view>
				<input class='item-content' type='number' placeholder='请输入短信验证码' v-model='myCode'></input>
			</view> -->
			<view class='enroll-item' style="margin-top: 2rpx;">
				<view class='item-title'>银行卡号</view>
				<view class='item-xing'>*</view>
				<input class='item-content' type='number' placeholder-style="color: #999" placeholder='请输入银行卡号' v-model='bankNumber'></input>
			</view>
			<view class='enroll-item' style="margin-top: 2rpx;">
				<view class='item-title'>卡类型</view>
				<view class='item-xing'>*</view>
				<input class='item-content' placeholder-style="color: #999" :value='cardType' disabled='true'></input>
			</view>

			<view class='withdraw-note'>用户须知</view>
			<view class='bank-reminder'>请填写您真实有效的信息并确保与身份证信息一致，如若信息错误或不一致会导致您提现失败。我们承诺您的资料用于在本平台用户提现打款不对外使用，请放心填写。</view>
			<view class='sign-up' :style="{background: isHot}" @click='submit'>提交</view>
		</view>
	</view>
</template>

<script>
	import {
		bankCardAttribution
	} from '@/utils/utilBank.js'
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				cardType: '',
				name: '',
				phoneNumber: '',
				bankName: '',
				bankNumber: '',
				temp: '',
				banklist: []
			}
		},
		computed: {
			isHot() {
				if (this.name != '' && this.bankNumber != '') {
					return '#F34930'
				} else {
					return '#ccc'
				}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		onLoad() {
			this.getBankNew()
		},
		methods: {
			getBankNew() {
				var that = this
				this.$request({
					url: '/Withdraws/getBankSetting',
					success: res => {
						if (res.data.status == 1) {
							var bank = res.data.data
							that.banklist = bank
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toastTop(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				})
			},
			submit() {
				var that = this;
				if (!that.name || that.name == '') {
					this.toastTop('请输入持卡人姓名')
					return false
				}
				if (!that.bankNumber || that.bankNumber == '') {
					this.toastTop('银行卡号不能为空')
					return false
				} else if (!that.cardType) {
					this.toastTop('不支持该类型的银行卡，请更换')
					return false
				}
				if (that.cardType == '信用卡') {
					this.toastTop('不支持该类型的银行卡，请更换')
					return false
				}
				console.log(that.temp)
				var nowItem = this.banklist.filter(item => that.temp.bankName.indexOf(item.bank_name) > -1)
				this.$request({
					url: '/user/addUserBank',
					data: {
						'user_id': uni.getStorageSync('userInfo').id,
						'user_name': that.name,
						'bank_code': nowItem[0]['bank_no'],
						'bank_number': that.bankNumber
					},
					success: res => {
						if (res.data.status == 1) {
							uni.hideLoading()
							uni.showModal({
								showCancel: false,
								content: res.data.message,
								confirmText: '返回',
								success(res) {
									if (res.confirm) {
										setTimeout(function() {
											uni.navigateBack({
												delta: 1
											});
										}, 2000)
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		watch: {
			'bankNumber'(newValue, oldValue) {
				var that = this
				var temp = bankCardAttribution(newValue)
				if (temp == 'error') {
					that.cardType = ''
					that.temp = ''
				} else {
					that.cardType = temp.bankName + temp.cardTypeName
					that.temp = temp
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped>
	.add-content {
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.get-code {
		padding: 5rpx 10rpx;
		border: solid 1rpx #3080E8;
		font-size: 24rpx;
		border-radius: 8rpx;
		color: #3080E8;
		min-width: 120rpx;
		text-align: center;
	}

	.add-content .enroll-item:first-child {
		border-top: solid 1rpx #efefef
	}

	.enroll-item {
		display: flex;
		flex-direction: row;
		background-color: white;
		width: 100%;
		box-sizing: border-box;
		height: 88rpx;
		flex-wrap: nowrap;
		align-items: center;
		border-bottom: solid 1rpx #efefef;
	}

	.item-title {
		font-size: 30rpx;
		color: #8a8a8a;
		white-space: nowrap;
		/* margin-left: 24rpx; */
	}

	.item-xing {
		color: #fc6262;
	}

	.item-content {
		font-size: 28rpx;
		flex: 1;
		text-align: right;
		padding-right: 24rpx;
		color: #333;
	}

	.withdraw-note {
		font-size: 30rpx;
		/* margin-left: 20rpx; */
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.bank-reminder {
		font-size: 28rpx;
		/* margin-left: 20rpx; */
		color: #8a8a8a;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		padding-right: 10rpx;
	}

	.sign-up {
		font-size: 30rpx;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: #3080E8; */
		width: 98%;
		border-radius: 8rpx;
		margin: 24rpx auto 0;
		color: white;
	}
</style>
